<script setup lang="ts">
import { ref } from 'vue'
import { useUserInfoStore } from '@/stores/pinia/userInfo'
import { storeApi } from '@/stores/vuex/api'
const useUserInfo = useUserInfoStore()
const props = withDefaults(
  defineProps<{
    msg: string //参数必传
    noMsg?: string //参数非必填
    btnShow?: boolean //是否显示按钮
  }>(),
  {
    noMsg: '参数默认值',
    btnShow: false
  }
)
const emit = defineEmits(['onOutData'])
const data = ref('子组件的参数')

const print = () => {
  console.log(props.msg, '父组件控制子组件事件触发')
}

const onOutData = () => {
  // 子传父
  emit('onOutData', data.value)
  useUserInfo.increment()
  storeApi.increment()
}

// 将事件和参数暴露出去
defineExpose({ print, data })
</script>

<template>
  <span class="green">{{ msg }}</span>
  <span class="green">noMsg:{{ noMsg }}</span>
  <button v-if="btnShow" @click="onOutData">触发</button>
</template>

<style scoped>
.green {
  margin-right: 10px;
}
</style>
